/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiColorStops:not(.ouiColorStops-isDisabled) {
  &:focus {
    outline: 2px solid $ouiFocusRingColor;
  }
}

.ouiColorStops__addContainer {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: $ouiRangeThumbHeight;
  margin-top: $ouiRangeThumbHeight * -.5;

  &:hover:not(.ouiColorStops__addContainer-isDisabled) {
    cursor: pointer;

    .ouiColorStops__addTarget {
      opacity: .7;
    }
  }
}

.ouiColorStops__addTarget {
  @include ouiCustomControl($type: 'round');
  @include ouiRangeThumbStyle;
  position: absolute;
  top: 0;
  height: $ouiRangeThumbHeight;
  width: $ouiRangeThumbHeight;
  background-color: $ouiColorLightestShade;
  pointer-events: none;
  opacity: 0;
  transition: opacity $ouiAnimSpeedFast;
}

.ouiColorStop {
  width: $ouiColorPickerWidth;
}

.ouiColorStopPopover.ouiPopover {
  position: absolute;
  top: 50%;
  width: $ouiRangeThumbWidth;
  height: $ouiRangeThumbHeight;
  margin-top: $ouiRangeThumbHeight * -.5;
}

.ouiColorStopPopover-hasFocus {
  z-index: 1;
}

.ouiColorStopPopover__anchor {
  position: absolute;
  width: 100%;
  height: 100%;

  // Background color can potentially have opacity
  // Pseudo element placed below the thumb to prevent the track from showing through
  &:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: $ouiRangeThumbHeight;
    width: $ouiRangeThumbHeight;
    border-radius: $ouiRangeThumbHeight;
    background: $ouiColorEmptyShade;
  }
}

.ouiColorStopThumb.ouiRangeThumb:not(:disabled) {
  // sass-lint:disable-block no-color-literals, indentation
  top: 0;
  margin-top: 0;
  pointer-events: auto;
  cursor: grab;
  border: solid ($ouiSizeXS - 1px) $ouiColorEmptyShade;
  box-shadow:
    0 0 0 1px $ouiColorMediumShade,
    0 2px 2px -1px rgba($ouiShadowColor, .2),
    0 1px 5px -2px rgba($ouiShadowColor, .2);

  &:active {
    cursor: grabbing;
  }
}

.ouiColorStopPopover-isLoadingPanel {
  // sass-lint:disable-block no-important
  visibility: hidden !important; // Overrides a stateful class on OuiPopover -> OuiPanel
}

.ouiColorStops.ouiColorStops-isDragging:not(.ouiColorStops-isDisabled):not(.ouiColorStops-isReadOnly) {
  cursor: grabbing;
}

.ouiColorStops__highlight {
  color: $ouiRangeTrackColor;
}
